<template>
  <div>
    <PageTools>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备编号">
          <el-input
            v-model="formInline.innerCode"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="Search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </PageTools>
    <el-card class="main">
      <el-button
        style="margin-bottom: 10px"
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        @click="addForm"
      >新建</el-button>
      <el-button
        style="margin-bottom: 10px"
        type="success"
        size="small"
        @click="Operation"
      >批量操作</el-button>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'normal',
          background: '#f3f6fb',
        }"
        @selection-change="Changecheckbox"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="设备编号" prop="innerCode" />
        <el-table-column label="设备型号" prop="type.name" />
        <el-table-column
          label="详细地址"
          prop="node.addr"
          :formatter="addrType"
        />
        <el-table-column label="合作商" prop="ownerName" />
        <el-table-column label="设备状态" prop="vmStatus">
          <template #default="{ row }">
            {{ vmStatusList[+row.vmStatus] }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              @click="detailsFn(row)"
            >货道</el-button>
            <el-button type="text" size="small" @click="PolicyFn(row)">策略</el-button>
            <el-button type="text" size="small" @click="UpdataFn(row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row v-if="totalPage!==1" type="flex" justify="space-between" align="middle">
        <el-col :span="19">
          <p class="paginationHeader">
            {{ `共${totalCount}条记录 第${page.pageIndex}/${totalPage}页` }}
          </p>
        </el-col>
        <el-col :span="5">
          <el-pagination
            background
            :current-page="page.pageIndex"
            :page-size="page.pageSize"
            :total="totalCount"
            layout="prev, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 批量策略管理 -->
    <el-dialog
      title="批量策略管理"
      :visible="dialogOperation"
      width="45%"
      @open="opneDialog"
      @close="dialogOperation=false"
    >
      <el-form label-width="120px">
        <el-form-item label="选择策略">
          <el-select
            v-model="UdataOperation.policyId"
            placeholder="请选择"
            style="width: 80%"
          >
            <el-option
              v-for="item in PolicyList"
              :key="item.policyId"
              :label="item.policyName"
              :value="item.policyId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click="dialogOperation = false"
        >取 消</el-button>
        <el-button
          type="primary"
          class="sure"
          @click="OperationConfig"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!-- 策略管理 -->
    <el-dialog
      title="策略管理"
      :visible="dialogPolicy"
      width="45%"
      @open="PolicyDialog"
      @close="dialogPolicy=false"
    >
      <el-form label-width="100px" class="demo-ruleForm">
        <el-row style="padding-left: 30px; margin-top: 25px">
          <el-col
            :span="12"
          ><div class="grid-content bg-purple">
            <el-form-item label="机器编号:">
              <span>{{ PolicyObj.innerCode }} </span></el-form-item>
          </div>
          </el-col>
          <el-col
            :span="12"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="策略名称:">
              <span>{{ PolicyObj.policyName }} </span></el-form-item>
          </div>
          </el-col>
          <el-col
            :span="12"
          ><div class="grid-content bg-purple">
            <el-form-item label="策略方案:">
              <span>{{ `${PolicyObj.discount}%` }} </span></el-form-item>
          </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click="cancelPolicy"
        >取消策略</el-button>
      </div>
    </el-dialog>
    <!-- 新增设备 -->
    <AddEquip :dialog-equip="dialogEquip" @addcloseEquip="addcloseEquip" @EquipcloseDialog="EquipcloseDialog" />
    <!-- 修改设备 -->
    <UpdataEquip :dialog-updata-equip="dialogUpdataEquip" :updata-equip-obj="UpdataEquipObj" @UpdatacloseDialog="UpdatacloseDialog" @UpdataDialog="UpdataDialog" />
    <!-- 货到设置 -->
    <AisleSetting :dialog-setting="dialogSetting" :seting-obj="setingObj" @resreh="resreh" @close="close" />
  </div>
</template>

<script>
import AisleSetting from './component/Aisle-settings.vue'
import UpdataEquip from './component/updata-equip.vue'
import AddEquip from './component/add- equip.vue'
import { VmSearch, VmSearchPolicy, updataApplyPolicy, vmPolicy, cancelPolicy } from '@/api/vm'
export default {
  components: {
    AddEquip,
    UpdataEquip,
    AisleSetting
  },
  data() {
    return {
      formInline: { innerCode: '' },
      loading: false,
      list: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      totalCount: 0,
      totalPage: 0,
      // 设备状态数字转化成文字
      vmStatusList: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      },
      checkboxList: [], // 批量操作数据
      dialogOperation: false, // 批量策略管理弹出层显示和隐藏
      PolicyList: [], // 选择策略下拉数据
      UdataOperation: {
        policyId: '',
        innerCodeList: []
      },
      dialogEquip: false, // 新增设备弹出框显示和隐藏
      dialogUpdataEquip: false, // 修改设备弹出框显示和隐藏
      UpdataEquipObj: {}, // 修改设备
      dialogSetting: false,
      setingObj: {},
      dialogPolicy: false, // 策略管理
      PolicyObj: {},
      cancelObj: {
        innerCode: '',
        policyId: ''
      }
    }
  },
  created() {
    this.VmSearch()
  },
  methods: {
    // 设备管理表格数据
    async VmSearch(innerCode) {
      this.loading = true
      const { data } = await VmSearch({ ...this.page, ...innerCode })
      this.list = data.currentPageRecords
      this.loading = false
      this.totalCount = Number(data.totalCount)
      this.totalPage = Number(data.totalPage)
    },
    // 1.查询
    Search() {
      this.VmSearch(this.formInline)
    },
    // 2.新增
    addForm() {
      this.dialogEquip = true
    },
    // 2.新增确定关闭弹出层拉去数据
    addcloseEquip() {
      this.VmSearch()
      this.dialogEquip = false
    },
    // 2.新增关闭
    EquipcloseDialog() {
      this.dialogEquip = false
    },
    // 2.1.批量操作
    Operation() {
      if (this.checkboxList.length === 0) {
        this.$message({
          message: '请勾选售货机',
          type: 'warning'
        })
      } else {
        this.dialogOperation = true
      }
    },
    // 3.分页
    changePage(val) {
      this.page.pageIndex = val
      this.VmSearch()
    },
    // 4.货道
    detailsFn(row) {
      this.dialogSetting = true
      this.setingObj = row
    },
    close() {
      this.dialogSetting = false
    },
    // 5.地址是字符串取到最后一位
    addrType(row, column, callValue, index) {
      const arr = callValue.split('-')
      const str = arr[arr.length - 1]
      return str
    },
    // 6.单选框改变触发可以得到选中的每一行存放到一个新数组里面为批量操作做判断
    Changecheckbox(val) {
      this.checkboxList = val
    },
    // 7.批量策略管理弹出框
    // 7.1.批量策略管理的弹出层打开--确定按钮
    async opneDialog() {
      const { data } = await VmSearchPolicy()
      this.PolicyList = data
    },
    async  OperationConfig() {
      this.checkboxList.forEach((item) =>
        this.UdataOperation.innerCodeList.push(item.innerCode)
      )
      await updataApplyPolicy(this.UdataOperation)
      this.VmSearch()
      this.dialogOperation = false
    },
    // 8.修改设备
    UpdataFn(row) {
      this.UpdataEquipObj = row
      this.dialogUpdataEquip = true
    },
    UpdatacloseDialog() {
      this.dialogUpdataEquip = false
    },
    UpdataDialog() {
      this.dialogUpdataEquip = false
      this.VmSearch()
    },
    resreh() {
      this.dialogSetting = false
      this.VmSearch()
    },
    // 策略管理---------------------------------
    async PolicyFn(row) {
      const { data } = await vmPolicy(row.innerCode)
      if (data) { // 如果接口打开有返回数据显示--策略管理--负责显示-批量策略管理
        this.dialogPolicy = true
        this.PolicyObj = data
        this.cancelObj.policyId = this.PolicyObj.policyId
        this.cancelObj.innerCode = row.innerCode
      } else {
        this.UdataOperation.innerCodeList.push(row.innerCode)
        this.dialogOperation = true
      }
    },
    // 取消策略
    async cancelPolicy() {
      await cancelPolicy(this.cancelObj)
      this.dialogPolicy = false
    },
    // 策略管理弹出层打开回调
    PolicyDialog() {}
  }
}
</script>
